<template>
  <div class="main">
    <mine-title>新建预测</mine-title>
    <div class="content">
      <div class="form-wrapper" v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
          <el-form-item label="上传数据" :required="true">
            <el-upload
              class="upload-demo"
              action=""
              drag
              ref="upload"
              :file-list="fileList"
              :auto-upload="false"
              :on-change="onChange"
              :accept="accept">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                选择或拖放数据文件
                <div>支持上传{{accept.replace(/\,/g, '、')}}</div>
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item class="form-btn-row">
            <mine-button type="primary" @click="cancel" secondary>取 消</mine-button>
            <mine-button type="primary" @click="save">预 测</mine-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      labelWidth: '100px',
      form: {},
      rules: {},
      accept: '.txt,.csv,.xls,.xlsx',
      fileList: []
    }
  },
  computed: {
    id () {
      return this.$route.query.id || '';
    }
  },
  methods: {
    async save () {
      if (!this.fileList.length) {
        this.$message({ type: 'warning', message: '请上传文件' });
        return;
      }
      const id = this.id;
      const formData = new FormData();
      formData.append('File',  this.fileList[0].raw);
      // formData.append('creater', this.$store.getters.userName || '');
      const params = {
        id,
        file: formData,
      };
      this.loading = true;
       try {
        const res = await this.$store.dispatch('proAdminImportModelTaskIdImportModelPredict', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '文件上传成功' });
          this.$confirm('是否跳转至我的预测列表?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            this.$router.push('/forecastList');
          })
        .catch(() => {});
        } else {
          this.$message({ type: 'error', message: '文件上传失败' });
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    onChange (files, fileList) {
      this.fileList = [files];
    },
    cancel () {
      window.history.go(-1);
    },
  }
}
</script>
